<template>
    <div>
        <!-- 筛选 -->
         <el-form :inline="true" :rules="accountSearchFormRules" ref="selectFrom" :model = "selectFrom" class="clearfix">
            <div class="fl query-l clearfix">
                <div class="fl">
                    <div>
                        <el-form-item label="昵称"  prop="nickName">
                            <el-input v-model="selectFrom.nickName" class="minw-100"></el-input>
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="姓名"  prop="name">
                            <el-input v-model="selectFrom.name" class="minw-100"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <div class="fl">
                    <div class="pl-27">
                        <el-form-item label="电话"  prop="phone">
                            <el-input v-model="selectFrom.phone" class="minw-100"></el-input>
                        </el-form-item>
                    </div>
                    <div>
                         <el-form-item label="账号状态" prop="status">
                            <el-select clearable placeholder="请选择" v-model="selectFrom.status">
                                <el-option label="正常" value="1"></el-option>
                                <el-option label="冻结" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </div>
                <div class="fl">
                    <div>
                        <el-form-item label="所在地域" prop="province">
                            <el-select clearable placeholder="请选择省份" v-model="selectFrom.province"  @change="changeProvince">
                                    <el-option v-for="item in RegionList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"></el-option>
                                  
                            </el-select>
                        </el-form-item>
                        <el-form-item label="" prop="city">
                            <el-select clearable placeholder="请选择城市" v-model="selectFrom.city" >
                                    <el-option v-for = "item in cityList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div>
                         <el-form-item label="角色：" prop="contractorOrEmployer">
                            <el-select clearable placeholder="请选择角色" v-model="selectFrom.contractorOrEmployer" >
                                <el-option label="发包方" value="1"></el-option>
                                <el-option label="接包方" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </div>
                <div class="fl">
                    <div>
                        <el-form-item label="用户类型：" prop="type">
                            <el-select clearable placeholder="请选择角色" v-model="selectFrom.type" >
                                <el-option label="个人" value="1"></el-option>
                                <el-option label="企业" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="认证状态：" prop="certificationStatus">
                            <el-select clearable placeholder="请选择角色" v-model="selectFrom.certificationStatus" >
                                <el-option label="已认证" value="1"></el-option>
                                <el-option label="未认证" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </div>
            </div>
                <div class="fr">
                    <div>
                        <el-form-item>
                                <el-button type="primary" @click="formSubmit('selectFrom')">查询</el-button>
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item>
                                <el-button type="primary" @click="resetFrom('selectFrom')">重置</el-button>
                        </el-form-item>
                    </div>
                </div>
         </el-form>
        <!-- 用户列表 -->
        <el-table v-loading.body="loading" :data="userList" border row-class-name="text-center" max-height="600" class="user-table" style="width:100%">
              <el-table-column prop="nickname" label="昵称" :show-overflow-tooltip = "true">
              </el-table-column>
              <el-table-column prop="name" label="名称" :show-overflow-tooltip = "true" >
                <template scope="scope">
                    <span @click.stop="userInfo.show = true" class="color02 pointer">{{scope.row.name}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="nickname" label="企业/个人" :show-overflow-tooltip = "true">
                <template scope="scope">
                    <span>{{scope.row.type === 1?"个人":"企业"}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="nickname" label="角色" :show-overflow-tooltip = "true">
                    <template scope="scope">
                        <span>{{scope.row.role === 1?"发包方":"接包方"}}</span>
                    </template>
              </el-table-column>
              <el-table-column prop="nickname" label="认证状态" :show-overflow-tooltip = "true">
                    <template scope="scope">
                        <span>{{scope.row.status === 1?"正常":"冻结"}}</span>
                    </template>
              </el-table-column>
              <el-table-column  label="所在地域" :show-overflow-tooltip = "true">
                     <template scope="scope">
                        <span>{{scope.row.province+scope.row.city}}</span>
                    </template>
              </el-table-column>
              <el-table-column prop="mobile" label="联系电话" :show-overflow-tooltip = "true">
              </el-table-column>
              <el-table-column prop="nickname" label="账号状态" :show-overflow-tooltip = "true">
                    <template scope="scope">
                      <span>{{scope.row.status === 1?"正常":"冻结"}}</span>
                    </template>
              </el-table-column>
              <el-table-column label="操作" width="157">
                  <template scope="scope">
                    <span @click="creditShow(scope)" class="nowrap color02 pointer" >信用管理</span>
                    <span @click="creditGrantingShow(scope.row.id,scope.row.name)" class="nowrap color02 pointer">授信管理</span>
                </template>
              </el-table-column>
        </el-table>
        <!-- 分页     -->
        <div class="pagination-wrapper clearfix" v-if="page.totalPage>1">
            <div class="fr mt-10">
                <span class="page-num font-14">
                    总数：<span v-text="100"></span> 每页显示 <span v-text="5"></span>  条 共 <span v-text="100"></span> 页
                </span>
                 <el-pagination class="fr" @current-change="changePage" :current-page="page.currentPage" :page-size="page.pageSize" layout="prev, pager, next" :total="page.totalCount">
                </el-pagination>
            </div>
        </div>
        <!-- 信用管理 -->
        <el-dialog  title="信用管理维护" :visible.sync="credit.show" size="small" class="credit" @close="closeCredit('credit')">
            <div v-show = "credit.maintain">
                <el-form :model="credit" :rules="creditRules" ref="credit">
                    <el-row>
                        <el-form-item>
                            <el-col :span=12 class="">
                                <span>信用值：</span>
                                <el-input-number :step="5" :min="0" :max="100" v-model = "credit.creditValue"></el-input-number>
                            </el-col>
                        </el-form-item>
                        <el-col :span=12>
                            <span>操作人：</span>
                            {{userName}}
                        </el-col>
                    </el-row>
                    <el-form-item prop="content">
                        <div class="mt-20">
                            <span>变更原因：</span>
                            <el-input
                                v-model = "credit.content"
                                type="textarea"
                                :autosize="{ minRows: 2, maxRows: 4}"
                                placeholder="请输入内容"
                                class="mt-10">
                            </el-input>
                        </div>
                    </el-form-item>
                </el-form>
                    <div class="text-center mt-20 text-right">
                        <el-button @click = "changeMaintain">关闭</el-button>
                        <el-button type="primary" @click="saveCredit('credit')">保存</el-button>
                    </div>
            </div>
            <div v-show = "!credit.maintain">
                <div class="clearfix">
                    <div class="fl">信用值：{{credit.creditValue}}</div>
                    <div class="fr">
                         <el-button type="primary" @click = "changeMaintain">维护</el-button>
                    </div>
                 </div>
                <el-table border row-class-name="text-center" :data="credit.list" class="mt-20" >
                    <el-table-column label="操作人" :show-overflow-tooltip = "true" prop = "managerName">
                    </el-table-column>
                    <el-table-column label="变更时间" :show-overflow-tooltip = "true" prop="createdAt">
                    </el-table-column>
                    <el-table-column  label="变更描述" :show-overflow-tooltip = "true" prop="description">
                    </el-table-column>
                    <el-table-column  label="变更动作" :show-overflow-tooltip = "true" >
                        <template scope="scope">
                            {{scope.row.type}}
                        </template>
                    </el-table-column>
                    <el-table-column label="变动分值" :show-overflow-tooltip = "true" prop="changeValue">
                    </el-table-column>
                    <el-table-column label="变更后" :show-overflow-tooltip = "true" prop="changeAfterValue">
                    </el-table-column>
                </el-table>
                <div class="clearfix mt-20" v-if="!credit.totalPage>1">
                     <el-pagination class="fr"  @current-change="getUserCreditLog" :current-page="credit.currentPage" :page-size="credit.pageSize" layout="prev, pager, next" :total="credit.totalCount">
                     </el-pagination>
                </div>
                <div class="text-center mt-20 text-right">
                    <el-button  @click="credit.show = false">关闭</el-button>
                </div>
            </div> 
        </el-dialog>
        <!-- 授信管理 -->
        <el-dialog  title="授信管理" :visible.sync="creditGranting.show">
            <el-row  class="text-center lh-30">
                <el-col :span="6">授信用户：是</el-col>
                <el-col :span="10">
                    <span class="fl">授信额度：</span>
                    <el-input v-model="creditGranting.creditLine" placeholder="请输入额度"  class="width-200"></el-input>
                </el-col>
                <el-col :span="8">
                    已用授信额度：{{creditGranting.usedCreditLine}}
                </el-col>
            </el-row>
            <div class="text-center mt-50 text-right">
                <el-button @click="creditGranting.show = false" type="primary" v-if = "creditGranting.isCreditAccount == 2">设为授信帐户</el-button>
                <el-button @click="cancelCredit" type="primary" v-if = "creditGranting.isCreditAccount == 1">取消授信帐户</el-button>
                <el-button @click="updateCredit" type="primary" v-if = "creditGranting.isCreditAccount == 1">更新授信额度</el-button>
                <el-button @click="creditGranting.show = false">关闭</el-button>
            </div>
        </el-dialog>
        <!-- 用户详情 -->
        <el-dialog size="large"  :visible.sync="userInfo.show" title="查看企业信息" >
            <div class="pos-rel">
                <el-popover
                    ref="popover4"
                    placement="right"
                    width="400"
                    trigger="click">
                    <el-row class="border-b1">
                       <h3>公司基本信息</h3>
                    </el-row>
                    <el-row class="mt-10">
                        <el-col :span="12">
                                <el-row>中文名称：北京进击科技有限公司</el-row>
                                <el-row>详细地址：北京市昌平区回龙观86号院</el-row>
                                <el-row>注册资本：100 万元</el-row>
                                <el-row>法定代表人：卢凯顺</el-row>
                                <el-row>统一社会信用码：91330101MA27Y7GK78</el-row>
                        </el-col>
                        <el-col :span="12">
                                <el-row>英文名称：abc</el-row>
                                <el-row>公司网站：example@163.com</el-row>
                                <el-row>公司规模：0-10人</el-row>
                                <el-row>联系电话：010-87818352</el-row>
                                <el-row>联系邮箱：example@163.com</el-row>
                        </el-col>
                    </el-row>
                </el-popover>
                <el-row>
                    <el-col :span="4">
                        <img src="https://dummyimage.com/95x95/f94242&text=#0011ff" alt="">
                    </el-col>
                    <el-col :span="20">
                        <el-row >
                            <el-col :span="6">用户编号：10080</el-col>
                            <el-col :span="6">昵称：破晓的清晨</el-col>
                            <el-col :span="6">用户等级：VIP</el-col>
                            <el-col :span="6">账号状态：正常</el-col>
                        </el-row>
                        <el-row class="mt-10">
                            <el-col :span="6" >
                                <div  v-popover:popover4 class="color02">认证状态：已认证(企业)</div>
                            </el-col>
                            <el-col :span="6">接发类型：接、发</el-col>
                            <el-col :span="6">积分等级：Lv 7</el-col>
                            <el-col :span="6">经验值：7000 分</el-col>
                        </el-row>
                        <el-row class="mt-10">
                            <el-col :span="6">注册渠道：手机/微博</el-col>
                            <el-col :span="8">注册时间：2016-10-08 10:54</el-col>
                            <el-col :span="8">最后登录时间：2016-10-08 10:54</el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <el-row class="mt-15">
                    <el-col :span="12">
                        <el-row><h3>发包信息总览</h3></el-row>
                            <el-row class="mt-15">
                                <el-col :span="8">信用值：100</el-col>
                                <el-col :span="8">好评率：80%</el-col>
                                <el-col :span="8">能力评估：优</el-col>
                            </el-row>
                            <el-row class="mt-05">
                                <el-col :span="8">总发包数：10 个</el-col>
                                <el-col :span="8">好评率：80%</el-col>
                                <el-col :span="8">能力评估：优</el-col>
                            </el-row>
                            <el-row class="mt-05">
                                <el-col :span="8">已托管数：8 个</el-col>
                                <el-col :span="8">待托管数：0 个</el-col>
                                <el-col :span="8">托管率：100%</el-col>
                            </el-row>
                            <el-row class="mt-05">
                                <el-col :span="8">签单数：6 个</el-col>
                                <el-col :span="8">完成数：4 个</el-col>
                                <el-col :span="8">失败数：2 个</el-col>
                            </el-row>
                        </el-col>
                    <el-col :span="12">
                            <el-row><h3>接包信息总览</h3></el-row>
                            <el-row class="mt-15">
                                <el-col :span="8">信用值：100</el-col>
                                <el-col :span="8">好评率：80%</el-col>
                                <el-col :span="8">能力评估：优</el-col>
                            </el-row>
                            <el-row class="mt-05">
                                <el-col :span="8">项目报名数：10 个</el-col>
                                <el-col :span="8">接包总金额：1.5  万元</el-col>
                                <el-col :span="8">签单成功率：30%</el-col>
                            </el-row>
                            <el-row class="mt-05">
                                <el-col :span="8">签单数：3 个</el-col>
                                <el-col :span="8">完成数：2 个</el-col>
                                <el-col :span="8">失败数：10 个</el-col>
                            </el-row>
                    </el-col>
                </el-row>
                <el-row class="mt-15">
                    <el-col :span = "12">
                        <el-tag type="warning">优质发包方</el-tag>
                        <el-tag type="warning">成交率高</el-tag>
                        <el-tag type="warning">付款及时</el-tag>
                        <el-tag type="warning">沟通顺畅</el-tag>
                    </el-col>
                    <el-col :span = "12">
                        <el-tag type="warning">种子用户</el-tag>
                    </el-col>
                </el-row>
                <div class="text-center mt-50" @click="userInfo.show = false">
                    <el-button >关闭</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import {
        getUserList,
        getcreditaccount,
        getRegionList,
        updateCreditFn,
        userCreditLog,
        accountCredit,
        changeCreditValue
    } from '@/api/user.js'
    import { mapGetters } from 'vuex'
    export default{
        created () {
            this.getUserListFn({
                currentPage: 1,
                pageSize: 10
            })
            this.showgetRegionList()
        },
        computed: {
            ...mapGetters([
                'userName'
            ])
        },
        data () {
            // 验证手机号码是否正确
            var checkPhone = (rule, value, callback) => {
                let pattern = /(13\d|14\d|15\d|17\d|18\d)\d{8}/
                if (value) {
                    if (!pattern.test(value)) {
                        return callback(new Error('请输入正确的11位手机号码'))
                    } else {
                        callback()
                    }
                } else {
                    callback()
                }
            }
            return {
                loading: false,

                RegionList: [],
                cityList: [],
                // elm组件校验对象
                accountSearchFormRules: {
                    phone: [{
                        validator: checkPhone,
                        trigger: 'blur'
                    }]
                },
                // 用户列表
                userList: null,
                // 翻页
                page: {
                    // 当前页
                    currentPage: 0,
                    // 每页数量
                    pageSize: 0,
                    // 全部条数
                    totalCount: 0,
                    // 全部页数
                    totalPage: 0
                },
                // 授信管理
                creditGranting: {
                    // 是否显示弹窗
                    show: false,
                    // 授信用户姓名
                    id: '',
                    name: '',
                    isCreditAccount: '',
                    creditLine: '',
                    usedCreditLine: ''
                },
                // 信用管理
                credit: {
                    id: 0,
                    // 是否显示弹窗
                    show: false,
                    // 信用值
                    creditValue: 0,
                    // 是否切换维护页面
                    maintain: false,
                    currentPage: 0,
                    pageSize: 0,
                    totalPage: 0,
                    totalCount: 0,
                    content: '',
                    list: []
                },
                creditRules: {
                    content: [{required: true, message: '请输入原因'}]
                },
                // 用户详情
                userInfo: {
                    // 是否显示弹窗
                    show: false,
                    approve: false

                },
                // 筛选查询
                selectFrom: {
                    // 账号状态
                    status: '',
                    // 所在省
                    province: '',
                    // 城市
                    city: '',
                    // 手机号码
                    phone: '',
                    // 昵称
                    nickName: '',
                    // 真实姓名/公司名称
                    name: '',
                    // 帐户类型
                    type: '',
                    // 角色
                    contractorOrEmployer: '',
                    // 认证状态
                    certificationStatus: ''
                }
            }
        },
        methods: {
            closeCredit (fromName) {
                this.credit.maintain = false
                this.resetFrom(fromName)
            },
            saveCredit (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let req = {
                            description: this.credit.content,
                            userAccountId: this.credit.id,
                            changeValue: this.credit.creditValue
                        }
                        changeCreditValue(req).then(data => {
                            if (data.data.code === 0) {
                                this.$message('保存成功')
                                this.credit.maintain = !this.credit.maintain
                                this.resetFrom(formName)
                            } else {
                                this.$message('保存失败')
                            }
                        })
                    }
                })
            },
            creditShow (scope) {
                this.credit.id = scope.row.id
                this.credit.show = true
                this.getUserCreditLog()
                this.getaccountCredit()
            },
            getaccountCredit () {
                let req = {
                    userAccountId: this.credit.id
                }
                accountCredit(req).then(data => {
                    this.credit.creditValue = data.data.data.creditValue
                })
            },
            getUserCreditLog (currentPage = 1) {
                let req = {
                    userAccountId: this.credit.id,
                    currentPage: currentPage,
                    pageSize: 5
                }
                userCreditLog(req).then(data => {
                    let msg = data.data
                    if (msg.code === 0) {
                        this.credit.list = msg.data.data
                        this.credit.currentPage = msg.data.currentPage
                        this.credit.pageSize = msg.data.pageSize
                        this.credit.totalCount = msg.data.totalCount
                        this.credit.totalPage = msg.data.totalPage
                    }
                })
            },
            changeProvince (Province) {
                this.selectFrom.city = ''
                for (let i = 0; i < this.RegionList.length; i++) {
                    if (this.RegionList[i].id === Province) {
                        this.cityList = this.RegionList[i].data
                    }
                }
            },
            creditGrantingShow (id, name) {
                this.creditGranting.name = name
                this.creditGranting.id = id
                let req = {
                    userAccountId: id
                }
                getcreditaccount(req).then(data => {
                    console.log(data)
                    let msg = data.data
                    if (msg.code === 0) {
                        this.creditGranting.isCreditAccount = msg.data.isCreditAccount
                        this.creditGranting.creditLine = msg.data.creditLine
                        this.creditGranting.usedCreditLine = msg.data.usedCreditLine
                        this.creditGranting.show = true
                    }
                })
            },
            showgetRegionList () {
                getRegionList().then(data => {
                    this.RegionList = data.data.data
                })
            },
            getUserListFn (req) {
                this.loading = true
                getUserList(req).then(data => {
                    this.loading = false
                    let r = data.data // response
                    if (r.code !== 0) {
                        throw d.message
                    }
                    let d = r.data
                    // console.log(data)
                    this.userList = d.data || []
                    this.page.currentPage = d.currentPage
                    this.page.pageSize = d.pageSize
                    this.page.totalCount = d.totalCount
                    this.page.totalPage = d.totalPage
                    this.$message('查询成功')
                }).catch((err) => {
                    this.loading = false
                    console.log(err)
                })
            },
            changeMaintain () {
                this.credit.maintain = !this.credit.maintain
            },
            changePage (currentPage) {
                let req = {
                    ...this.selectFrom,
                    pageSize: this.page.pageSize,
                    currentPage: currentPage
                }
                this.getUserListFn(req)
            },
            formSubmit: function (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.getUserListFn({
                            ...this.selectFrom,
                            currentPage: this.page.currentPage,
                            pageSize: this.page.pageSize
                        })
                    } else {
                        this.$message('查询失败，请查看查询条件')
                    }
                })
            },
            resetFrom: function (formName) {
                this.$refs[formName].resetFields()
            },
            updateCredit () {
                let req = {
                    id: this.creditGranting.id,
                    isCreditAccount: this.creditGranting.isCreditAccount,
                    creditLine: this.creditGranting.creditLine
                }
                updateCreditFn(req).then(data => {
                    if (data.data.code === 0) {
                        this.$message('更新成功')
                        this.creditGranting.show = false
                    }
                })
            },
            cancelCredit () {
                this.$message('取消成功')
                this.creditGranting.show = false
            }
        }
    }
</script>
<style scoped>
    .dialog-box{
        z-index: 9999;
        width: 100%;
    }
    .width-200{
        width: 150px;
    }
    .w-1000{
        width: 1000px
    }
    .lh-30{
        line-height: 30px;
        line-height: 30px/9;
    }
    .user-detail{
        width:1000px;margin:0 auto
    }
    .table-overflow{
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .border-b1{
        border-bottom: 1px solid #ccc
    }
    .nowrap {
        white-space:nowrap;
    }
    .pl-27{
        padding-left: 27px;
    }
</style>
